<template>

  <el-card class="form-container" shadow="never">
    <h3 style="font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','微软雅黑',Arial,sans-serif;color: #1f2f3d;font-weight: 400;text-align: left">
      <i class="el-icon-tickets"></i>
      <span>修改密码</span>
    </h3>
    <el-form :model="form"
             ref="adminForm"
             :rules="rules"
             label-width="150px" size="small">

      <el-form-item label="旧密码：" prop="oldPwd">
        <el-input type="password" v-model="form.oldPwd"></el-input>
      </el-form-item>
      <el-form-item label="新密码：" prop="pwd">
        <el-input type="password" v-model="form.pwd"></el-input>
      </el-form-item>
      <el-form-item label="确认密码：" prop="rePwd">
        <el-input type="password" v-model="form.rePwd"></el-input>
      </el-form-item>
    </el-form>
    <div ref="t" style="width: 100%;display: flex;justify-content: center;flex-direction: row">
      <div>
        <el-button style="margin: 0 auto;width: fit-content" type="primary" @click.prevent.native="handle">提交
        </el-button>
        <el-button @click="resetForm">重置</el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
import {updateAdminPwd} from "@/api/admin";

const defaultForm = {
  oldPwd: '',
  pwd: '',
  rePwd: ''
}
export default {
  name: "repwd",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (value === this.form.oldPwd) {
        callback(new Error("新密码与旧密码一致"))
      } else if (value.length < 6) {
        callback(new Error('最少输入6位'));
      } else {
        if (this.form.rePwd !== '') {
          this.$refs.adminForm.validateField('rePwd');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value.length < 6) {
        callback(new Error('最少输入6位'));
      } else if (value !== this.form.pwd) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      form: Object.assign({}, defaultForm),
      rules: {
        oldPwd: [{required: true, message: '请输入旧密码', trigger: 'blur'},],
        pwd: [
          {validator: validatePass, trigger: 'blur'}
        ],
        rePwd: [
          {validator: validatePass2, trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    handle() {
      this.$refs["adminForm"].validate((valid) => {
        if (valid) {
          updateAdminPwd(this.form).then(res => {
            this.$message.success(res.message)
          })
        } else {
          this.$message.error("密码信息填写有误")
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm() {
      this.form = Object.assign({}, defaultForm)
    }
  }
}
</script>

<style scoped>

</style>
